<template>
	<view class="all">
		<view style="height: var(--status-bar-height);opacity: 0;">
			<!-- app状态栏高度占位 -->
		</view>
		<view class="">
			<u-navbar title="编辑房间" @rightClick="rightClick" :autoBack="true">
				<view class="u-nav-slot" slot="right" style="color: #5398F6;">
					保存
				</view>
			</u-navbar>
		</view>
		<view class="roomPic">
			<view class="title">
				房间图片<text style="font-size: 24rpx;color: #242424;">(最多上传6张)</text><text style="color: #E82828;">*</text>
			</view>
			<view class="upload">
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					:maxCount="10" uploadIcon='plus' width="220rpx" height="170rpx"></u-upload>
			</view>
		</view>
		<view class="name">
			<view class="title">
				房间名称<text style="color: #E82828;">*</text>
			</view>
			<view class="content">
				<u--input :customStyle=test placeholder="请输入内容" border="surround" clearable v-model="form.home_type"
					@blur="blur"></u--input>
			</view>
		</view>
		<view class="price">
			<view class="title">
				房间价格<text style="color: #E82828;">*</text>
			</view>
			<view class="content">
				<u--input :customStyle=test placeholder="请输入内容" border="surround" clearable
					v-model="form.home_price	"></u--input>
			</view>
		</view>
		<view class="area">
			<view class="title">
				房间面积
			</view>
			<view class="content">
				<u--input :customStyle=test placeholder="请输入内容" border="surround" clearable
					v-model="form.home_size"></u--input>
			</view>
		</view>
		<view class="amount">
			<view class="title">
				房间数
			</view>
			<view class="content">
				<u--input :customStyle=test placeholder="请输入内容" border="surround" clearable
					v-model="home_num"></u--input>
			</view>
		</view>
		<view class="number">
			<view class="title">
				房间号<text style="font-size: 24rpx;">(已入住房间不能编辑)</text><text style="color: #E82828;">*</text>
			</view>
			<view class="content">
				<view class="sinput" v-for="(items,index) in form.homeNum" :key='index' ref="handleNodes">
					<u--input border="none" type="number"  inputAlign="center" :readonly="items.instutution_status===1?false:true" @blur="addChange(items)" v-model="items.institution_num" class="inputs"></u--input>
					<view class="del iconfont" v-if="items.instutution_status===1" @click="deletRoom(items)">
						&#xeca0;
					</view>
				</view>
				<view class="addinput iconfont" @click="addRoom">
					&#xe623;
				</view>
			</view>
		</view>
		<view class="describe">
			<view class="title">
				房间介绍<text style="color: #E82828;">*</text>
			</view>
			<view class="content">

				<u--textarea v-model="form.home_detail" autoHeight placeholder="请输入房间介绍"></u--textarea>
			</view>
		</view>
		<view class="facility">
			<view class="title">
				房间设施
			</view>
			<view class="content">
				<u--textarea v-model="form.home_facility" autoHeight placeholder="请输入房间设施"></u--textarea>
			</view>
		</view>
		<view class="tips">
			<view class="title">
				温馨提示
			</view>
			<view class="content">
				1.养老机构按照老人自愿入院的原则入住。<br>
				2.养老机构可能对老人提供流动服务与呼叫服务相结合。老人及子女若有增项服务，应该与院方协商，取得同意方可使用。<br>
				3.预约成功后，养老机构会收到您的预约信息，请等待工作人员与您联系。<br>
				4.预约成功后，欢迎您按预约时间前往养老院机构参观环境和现场查看房型。
			</view>
		</view>
		<view class="" style="height: 100rpx;"></view>
	</view>
</template>

<script>
	import {homeTypeInfo,upHomeType,delInstitutionHome,addInstitutionHome,upInstitutionHome} from '@/utils/api.js'
	export default {
		data() {
			return {
				test: {
					height: '100%',
					padding: '0 0 0 0',
					border: 'none'
				},
				close3: true,
				fileList1: [],
				home_num:'',
				form: {
					home_type: '精装一居室(A户型)',
					home_price: '￥1000/月',
					home_size: '',
					home_facility: '',
					home_detail: '',
					homeTypeImg:[],
					homeNum:[],
					homeTypeId:''
				},
				value1: '精装一居室套间，1室1厅1厨1卫1阳台，中式现代风格、环保装潢、安静明亮、智能门禁、智能家电、高档红木家具、星级酒店配套标准、智能厨卫、独立卫生间、恒温水地暖、24小时热水供应、紧急呼叫系统、互联网WIFI、冬暖夏凉、轻松拎包入住。',
				value2: '通风良好    空调    无障碍卫生间    无障碍地面    安坐扶靠',
				roomNum: [],
				roomValue: '',
				urlArr:[],
				homeTypeId:'',
				midValue:[],
				isReadOnly:true
			};
		},
		onLoad(option){
			console.log(option,'*****');
			this.form.homeTypeId=option.homeTypeId
			homeTypeInfo(option).then((res)=>{
				if(res.data.meta.status==200){
					this.form.home_type=res.data.data.home_type
					this.form.home_price=res.data.data.home_price
					this.form.home_size=res.data.data.home_size
					this.form.home_facility=res.data.data.home_facility
					this.form.home_detail=res.data.data.home_detail
					this.home_num=res.data.data.home_num.length
					this.form.homeNum=res.data.data.home_num
					res.data.data.home_img.forEach((item)=>{
						this.fileList1.push({url:item})
					})
					this.urlArr	=res.data.data.home_img
				}
			})
		},
		mounted() {
			homeTypeInfo({homeTypeId:this.form.homeTypeId}).then(res=>{
				this.midValue=res.data.data.home_num
			})
		},
		methods: {
			blur() {
				
			},
			addChange(item){
				console.log(555,item);
				let status= true
				this.form.homeNum.forEach((item)=>{
					if(!item.institution_num){
						console.log('草草');
						status=false
					}
				})
				if(status){
					if(item.id){
						let value=true
						this.midValue.forEach((item2)=>{
							if(item.institution_num==item2.institution_num){
								value=false
							}
						})
						if(value){
							let data={homeId:item.id,institution_num:item.institution_num}
							upInstitutionHome(data).then(res=>{
								console.log(res,'----------');
							})
						}
						if(!value){
							uni.showToast({
								title:'房间号重复，请检查',
								icon:'error'
							})
						}
					}
					else{
						let data={typeId:this.form.homeTypeId,homeArr:item.institution_num}
						addInstitutionHome(data).then(res=>{
							console.log(res,'+++++++');
							if(res.data.meta.status==404){
								uni.showToast({
									title:'房间号重复添加，请检查',
									icon:'error'
								})
							}
						})
					}
				}else{
					console.log(item.id,'lll222');
					uni.showToast({
						title:"房间号不能为空",
						icon:'none'
					})
				}
				// // console.log('sss');
				// this.form.homeNum.forEach((item)=>{
				// 	if(item.institution_num==''){
				// 		console.log('草草');
				// 	}
				// })
			},
			handleNodes(el){
				console.log(el,'5555');
			},
			addRoom() {
				let status= true
				this.form.homeNum.forEach((item)=>{
					console.log('草草',item);
					if(!item.institution_num){
						status=false
					}
				})
				if(status){
					this.form.homeNum.push({instutution_status:1})
				}else{
					uni.showToast({
						title:"添加房间号不能为空",
						icon:'none'
					})
				}
				this.home_num=this.form.homeNum.length
			},
			deletRoom(item) {
				this.form.homeNum=this.form.homeNum.filter((item2)=>{
					return item2 !== item
				});
				let data={homeId:item.id}
				delInstitutionHome(data).then(res=>{
					
				})
			},
			rightClick() {
				console.log();
				this.form.homeTypeImg=this.urlArr
				let data =this.form
				
				delete data.homeNum
				upHomeType(data).then(res=>{
					if(res.data.meta.status==200){
						uni.showToast({
							title:'编辑成功',
							icon:'success'
						})
						setTimeout(()=>{
							uni.switchTab({
								url:'/pages/room/room'
							})
						},1000)
					}
				})
			},
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url:'https://www.ghhlkj.com/api/saveFile',
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							this.urlArr.push(JSON.parse(res.data).url)
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
				this.urlArr.splice(event.index, 1)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.all {
		background-color: #ffffff;

		.roomPic {
			margin-top: 44px;
			padding: 40rpx 24rpx;

			.title {
				font-weight: bold;
			}

			.upload {
				margin-top: 40rpx;
			}
		}

		.name,
		.price,
		.area,
		.amount {
			display: flex;
			padding: 0 24rpx;
			height: 100rpx;
			line-height: 100rpx;
			border-top: 1rpx solid #fbfbfb;

			.title {
				flex: 1;
				font-size: 32rpx;
				font-weight: bold;
				color: #242424;
			}

			.content {
				flex: 2;
				font-size: 32rpx;
				font-weight: bold;
				color: #242424;

			}
		}

		.amount {
			border-bottom: 1rpx solid #fbfbfb;
		}

		.number {
			.title {
				padding: 0 24rpx;
				height: 100rpx;
				line-height: 100rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #242424;
			}

			.content {
				padding: 0 24rpx;
				display: flex;
				flex-wrap: wrap
			}

			.sinput {
				margin-right: 30rpx;
				margin-bottom: 20rpx;
				width: 146rpx;
				height: 88rpx;
				background-color: #f6f6f6;
				border-radius: 8rpx;
				position: relative;

				.inputs {
					width: 140rpx;
					height: 88rpx;
					line-height: 88rpx;
					background-color: #f6f6f6;
					border-radius: 8rpx;
				}

				.del {
					position: absolute;
					right: -9.5px;
					top: -6.5px;
					background-color: #a8a8a8;
					width: 15px;
					height: 15px;
					border-radius: 7.5px;
					font-size: 9px;
					line-height: 15px;
					text-align: center;
					font-weight: normal;
					color: #ffffff;
				}
			}

			.addinput {
				margin-right: 30rpx;
				margin-bottom: 20rpx;
				width: 140rpx;
				height: 88rpx;
				background-color: #f6f6f6;
				line-height: 88rpx;
				text-align: center;
				color: #a8a8a8;
				font-size: 40rpx;
			}


		}

		.describe,
		.facility,
		.tips {
			.title {
				height: 100rpx;
				line-height: 100rpx;
				padding: 0 24rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #242424;
			}

			.content {
				padding: 0 24rpx;
				font-size: 26rpx;
				font-weight: bold;
				color: #484848;
				line-height: 60rpx;
			}
		}

	}
</style>